<template>
	<div class="modal">
		<Modal v-model="data.isShow" :mask-closable="false" width="820" :styles="{top: '80px'}">
			<p slot="header" class="header">结算</p>
			<div class="main-view">
				<div class="left-view">
					<p style="color: #433E41">确认订单：</p>
					<table border="1">
						<tr>
							<td>物品名称</td>
							<td>单价</td>
							<td>数量</td>
							<td>总计</td>
						</tr>
						<tr v-for="item in orderData.data">
							<td>{{item.name}}</td>
							<td>{{item.price}}</td>
							<td>{{item.number}}</td>
							<td>￥{{item.price * item.number}}</td>
						</tr>
					</table>
				</div>
				<div class="right-view">
					<div class="statistics">
						<XPriceView :data="priceData"></XPriceView>
					</div>
					<div class="payWay">
						<XGCPayWayView
							:data="payWayData" :isMember="isMemberData" :orderPrice="priceData.money">
						</XGCPayWayView>
					</div>
					<Checkbox true-value="1" false-value="0" v-model="delivery">是否配送</Checkbox>
                    <div style="margin-top: .2rem;" v-if="payWayData.isHand == 1 || delivery == 1">
                        影厅名称：
                        <Select v-model="roomData.roomId" style="width:2rem" @on-change="changeRoom">
                            <Option v-for="item in roomList" :value="item.rid" :key="item.rid">{{ item.name }}</Option>
                        </Select>
                        <p style="margin-top: .2rem;">姓名：{{roomData.name}}</p>
                        <p>电话：{{roomData.phoneNum}}</p>
                    </div>
				</div>
			</div>
			<div slot="footer">
				<Button @click="clickDouble('close')" v-if="data.isOpen">取消双屏</Button>
				<Button type="primary" @click="clickDouble('open')" v-else>开启双屏</Button>
				<Button type="primary" @click="clickSubmit('submit')">提交订单</Button>
				<Button @click="clickSubmit('cancel')">取消支付</Button>
			</div>
		</Modal>
		
	</div>
</template>

<script>
import roomService from '@/network/service/roomService.js'
import XTableModule from '@/components/XTableModule'
import XPriceView from '@/components/XPriceView'
import XGCPayWayView from '@/components/XGCPayWayView'

export default {
	props: ['data'],
	components: {
		XTableModule,
		XPriceView,
		XGCPayWayView,
	},
	data() {
		return {
			coin: 0,
			isClear: false,
			value: 0,
			flag: true,
			payShow: true,
			orderData: {
				data: []
			},
			priceData: {
				money: 0,
				calculate: 0
			},
			isMemberData: {
				isMember: false,
				isGiveCredit: '',
				creditLine: '',
				mstatus: null
			},
			payWayData: {
				payWay: '2',
				isHand: 0,
			},
			delivery: '0',
			roomList: [],
			roomData: {
				name: '',
				phoneNum: '',
				roomId: ''
			},
			payWayList: [
				{
					imageUrl: require('@/assets/mo-1.png'),
					label: '现金'
				},
				{
					imageUrl: require('@/assets/zpay-0.png'),
					label: '支付宝'
				},
				{
					imageUrl: require('@/assets/we-0.png'),
					label: '微信'
				},
				{
					imageUrl: require('@/assets/vip-0.png'),
					label: '会员卡'
				},
				{
					imageUrl: require('@/assets/card-0.png'),
					label: '银联卡'
				},
				{
					imageUrl: require('@/assets/hun-0.png'),
					label: '混合支付'
				},
				{
					imageUrl: require('@/assets/g-0.png'),
					label: '挂账'
				}
			],
			
		}
	},
	mounted() {
		this.orderData.data = this.data.data;
		this.data.data.payType = 2;
		this.data.data.map(item => {
			this.priceData.money += item.number * item.price;
			this.priceData.calculate += item.number * item.price;
		})
		this.data.form.actualMoeny = this.priceData.money;
		this.getRoomList();
	},
	computed: {
		changeNote() {
			let data = this.orderData.data;
			let sum = 0;
			let totalCost = 0;
			for (var i = 0; i < data.length; i++) {
				sum = data[i].price * data[i].number;
				totalCost += sum
			}
			return totalCost
		}
	},
	methods: {
		changeRoom(val) {
			this.roomCostDetail(val);
		},
		onBlur(val) {
			if (val - this.changeNote < 0) {
				this.$Message.error('实收金额不对');
				this.flag = false;
			} else {
				this.flag = true;
				this.coin = val - this.changeNote;
			}
		},
		clickDouble(type) {
			this.$emit('on-click-double', type);
		},
		clickSubmit(type) {
			let pros = []
			this.data.data.forEach(item => {
				let obj = {}
				obj.pid = item.pid;
				obj.price = item.price;
				obj.num = item.number;
				pros.push(obj);
			});
			let params = {
				pros: pros,
	            actualMoeny: this.data.form.actualMoeny,
	            payType: this.payWayData.payWay,
	            isHand: this.payWayData.isHand,
	            isAuth: 0,
	            authMoney: '',
	            authAccId: '',
				vipCardId: '',
				isDeliver: this.delivery,
            	roomId: this.roomData.roomId,
	            deviceMac: '',
			}
			if (type == 'cancel') {
				this.$emit('on-submit', type, params, this.data)
			} else {
				if (this.payShow) {
					if (this.flag) {
						this.$emit('on-submit', type, params, this.data)
					} else {
						this.$Message.error('请输入实收金额!');
					}
				} else {
					this.data.form.actualMoeny = this.changeNote;
					this.$emit('on-submit', type, params, this.data)
				}
			}
		},
		getRoomList() {
			let params = {
				scales: '',
				status: 3
			}
			roomService.getRoomList(params).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.roomList = result.data;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		},
		roomCostDetail(id) {
			roomService.roomCostDetail(id).then(res => {
				let result = res.data;
				let code = result.rescode;
				let resmsg = result.msg;
				if (code == 100) {
					this.roomData.name = result.data.name;
					this.roomData.phoneNum = result.data.phoneNum;
				} else {
					this.$Message.error(resmsg);
				}
			}, error => {
				this.$Message.error('服务器异常，请稍后再试');
			})
		}
	}
}	
</script>

<style scoped lang="less">
.header {
	text-align: center;
	font-size: .14rem;
	color: #433E41;
}
.main-view {
	display: flex;
	.left-view {
		width: 50%;
		padding-right: .2rem;
		overflow: auto;
		border-right: .01rem solid #D5CED2;
		p {
			height: .4rem;
		}
		table {
			width: 100%;
			border: 1px solid #D5CED2;
			tr {
				height: .4rem;
			}
			td {
				text-indent: .1rem;
			}
		}
	}
	.right-view {
		padding-left: .2rem;
		width: 50%;
		.statistics {
			margin-bottom: .3rem;
			td {
				font-size: .14rem;
				padding-top: .3rem;
			}
			.td {
				text-align: right;
				color: #433E41;
			}
			.td-price {
				font-size: .24rem;
				color: #CD2A86;
			}
		}
		.payWay {
			.payWay-view {
				display: flex;
				flex-wrap: wrap;
				.item {
					margin-right: .2rem;
					margin-bottom: .2rem;
					img {
						width: .6rem;
						height: .6rem;
					}
					p {
						text-align: center;
					}
				}
			}
		}
	}
}
</style>